<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="博客,技术,PHP,Mysql,Html,Css,Ajax,服务器,Js,数据库,网站,微信公众号,小程序" />
    <meta name="description" content="Alinejun - 个人技术博客，专注码农的世界" />
    <title>{$data.title} - 个人技术博客</title>
    <link rel="icon" href="__IMG__/favicon.ico">
    <link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/head.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/index.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/news.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/base.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="__LIB__/editormd/css/editormd.preview.css" />
    <style>
        .detail table{table-layout: auto}
        .code .container:before{display: none;}
        .code .container:after{display: none;}
    </style>
</head>
<body>
    <!-- head -->
    <div class="container-fluid" style="padding: 0px">
        <div class="header">
            <!-- header -->
            {:widget('Common/header')}
            <!-- /header -->

            <!-- category -->
            {:widget('Common/category')}
            <!-- /category -->
        </div>
    </div>
    <!-- head -->

	<!-- itemGrid for hot -->
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-md-9 box-left">

                <!-- content -->
                <div class="conews" style="padding:0;">
                    <div class="cont">
                        <div class="title">
                            <h2>{$data.title}</h2>
                            <p>
                                <span class="cate">
                                    <em>分类</em>
                                    <a class="btn btn-default btn-sm" href="{:url('index/news/index',['class_id' => $data['class_id']])}" title="{$data.classname}">{$data.classname}</a>
                                </span>
                                
                                <span class="lab">
                                    <em>标签</em>
                                    {volist name="data.labels" id="vo"}
                                        <a class="btn btn-default btn-sm" href="{:url('index/news/index',['label_id' => $vo['label_id']])}" title="{$vo.name}">{$vo.name}</a>
                                    {/volist}
                                </span>
                            </p>
                        </div>
                        <div class="desc">
                            <p class="text-desc">{$data.desc}</p>
                            <div class="line"></div>
                            <p class="other">
                                <span class="scan">
                                    <i class="iconfont">&#xe614;</i>
                                    {$data.scan}
                                </span>
                                <span class="time">
                                    <i class="iconfont">&#xe6b7;</i>
                                    {$data.create_time}
                                </span>                                
                            </p>
                        </div>
                        <div class="detail" id="cont-md">
                            <textarea style="display:none;">{$data.content}</textarea>
                        </div> 

                        <div class="foot">
                            <p class="thend"><span>-</span><b>THE END</b><span>-</span></p>
                            <div class="mt10">
                                <p>版权声明：本文来自 <a href="{:url('index/index/index')}">Alinejun - 个人技术博客</a></p>
                            </div>
                        </div>

                        <!-- 上下文 -->
                        <div class="others">
                            <p>
                                <span class="op">上一篇：</span>
                                {if $prev == ''}
                                    <a href="javascript:;" title="暂无更多文章" class="newsname null">暂无更多文章</a>
                                {else/}
                                    <a href="{:url('index/news/info',['news_id' => $prev['news_id']])}" title="{$prev.title}" class="newsname">{$prev.title}</a>
                                {/if}
                            </p>
                            <p>
                                <span class="op">下一篇：</span>
                                {if $next == ''}
                                    <a href="javascript:;" title="暂无更多文章" class="newsname null">暂无更多文章</a>
                                {else/}
                                    <a href="{:url('index/news/info',['news_id' => $next['news_id']])}" title="{$next.title}" class="newsname">{$next.title}</a>
                                {/if}
                            </p>                            
                        </div>
                    </div>

                </div>                    
                <!-- content -->
                
                <div class="main-comment">
                    <div class="comment">
                        <div class="bbs">
                            <form class="form-inline">
                                <div class="author">
                                    {if $member == null}
                                        <a href="{:url('index/login/index')}" class="btn btn-default btn-sm" style="border:1px solid #999">登录</a>
                                    {else\}
                                        <div class="usergroup">
                                            <img src="__ROOT__{$member.headpic}" class="img-circle" alt="{$member.nickname}" width="40">
                                            <span>&nbsp;&nbsp;Author：&nbsp;&nbsp;{$member.nickname}</span>
                                        </div>
                                    {/if}
                                </div>
                                <textarea name="content" class="form-control" style="width: 100%" rows="6">{if $member == null}请登录..{/if}</textarea>
                                <p class="sub">
                                    <span class="msg">评论文章</span>
                                    <input type="hidden" name="comment_id" value="">
                                    <input type="hidden" name="reply_type" value="">
                                    <input type="hidden" name="reply_id" value="">
                                    <input type="hidden" name="news_id" value="{$data.news_id}">
                                    <input type="hidden" name="title" value="{$data.title}">
                                    <button type="button" class="btn btn-success">提交</button>
                                </p>
                            </form>
                        </div>
                        <div class="content titlebar">
                            <div class="head">
                                <h3><b>评论</b></h3>
                            </div>
                            {if $comments == null}
                                <p class="nulls">当前暂无评论，快来说两句吧！</p>
                            {else/}
                                {volist name="comments" id="vo"}
                                <div class="item discuss">
                                    <div class="author">
                                        <img src="__ROOT__{$vo.userinfo.headpic}" class="img-circle" alt="{$vo.userinfo.nickname}" width="40">
                                        <span>{$vo.userinfo.nickname}</span>
                                    </div>
                                    <div class="cont">
                                        <div class="info">{$vo.content}</div>
                                        <p class="other">
                                            <span class="time">
                                                <i class="iconfont">&#xe6f1;</i>
                                                {$vo.create_time}
                                            </span>
                                            <span class="like">
                                                <a href="javascript:;" class="like_count" data-id="{$vo.comment_id}">
                                                    <i class="iconfont">&#xe61b;</i>（<em>{$vo.like_count}</em>）
                                                </a>
                                            </span>
                                            <span class="more">
                                                <a href="javascript:;" class="up {if $vo.discuss < 1}disable{/if}" data-id="{$vo.comment_id}">
                                                    <i class="iconfont">&#xe642;</i>（{$vo.discuss}）
                                                </a>
                                            </span>
                                            <span class="reply">
                                                <a href="javascript:;" class="sub-reply" data-comment="{$vo.comment_id}" data-type="1">回复</a>
                                            </span>
                                        </p>
                                    </div>
                                    <div class="reply-group"></div>
                                </div>
                                {/volist}
                            {/if}

                        </div>                      
                    </div>

                </div>
            </div>
            <div class="col-sm-4 col-md-3 box-right">
                <!-- news -->
                {:widget('Common/news')}
                <!-- /news -->

                <!-- labels -->
                {:widget('Common/labels')}
                <!-- /labels -->

                <!-- comment -->
                {:widget('Common/comment')}
                <!-- /comment -->    
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <!-- footer -->
    {:widget('Common/footer')}
    <!-- /footer -->
    
    <script type="text/javascript" src="__JS__/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="__JS__/jquery.ripples.js"></script>
    <script type="text/javascript" src="__JS__/base.js"></script>
    <script type="text/javascript" src="__STATIC__/layer/layer.js"></script>
    
    <!-- markdown -->
    <script src="__LIB__/editormd/lib/marked.min.js"></script>
    <script src="__LIB__/editormd/lib/prettify.min.js"></script>
    <script src="__LIB__/editormd/lib/raphael.min.js"></script>
    <script src="__LIB__/editormd/lib/underscore.min.js"></script>
    <script src="__LIB__/editormd/lib/sequence-diagram.min.js"></script>
    <script src="__LIB__/editormd/lib/flowchart.min.js"></script>
    <script src="__LIB__/editormd/lib/jquery.flowchart.min.js"></script>
    <script src="__LIB__/editormd/editormd.js"></script>
    <!-- markdown -->
    <script>

        $(function(){

            var testEditor = editormd.markdownToHTML("cont-md", {
                htmlDecode : "style,script,iframe",
                emoji : true,
                taskList : true,
                tex : true, // 默认不解析
                flowChart : true, // 默认不解析
                sequenceDiagram : true, // 默认不解析
                codeFold : true
            });

            $(".bbs .sub button").click(function(){
                $.ajax({
                    url:'/index/news/comment',
                    data:$("form").serialize(),
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        if (data.status == -1) {
                            layer.msg(data.msg);
                        }else{
                            layer.alert(data.msg, function(){
                                location.reload();
                            });
                        }
                    }
                })
            })

            // 回复
            $(".item").on("click", ".reply .sub-reply",function(){
                var ur   = $(this).parents(".discuss").eq(0).children(".author").find("span").text();
                var co   = $(this).attr("data-comment");
                var type = $(this).attr("data-type");
                var rep  = $(this).attr("data-reply");

                $(".bbs .sub .msg").text("回复："+ur);
                $("input[name='comment_id']").val(co);
                $("input[name='reply_type']").val(type);
                $("input[name='reply_id']").val(rep);
            })
            
            // 查看评论
            $(".more a").click(function(){
                if ($(this).hasClass("disable")) {
                    return;
                }

                var index = layer.load(2);
                var pa = $(this).parents(".item");
                var comment_id = $(this).attr("data-id");
                if (pa.find(".reply-group .discuss").length > 0) {
                    pa.find(".reply-group").toggle();
                    layer.close(index);
                    return;
                }

                $.ajax({
                    url:'/index/news/more',
                    data:{"id":comment_id},
                    type:'post',
                    dataType:'html',
                    success:function(data){
                        layer.close(index);
                        if (data == 3) {
                            return;
                        }else{
                            pa.find(".reply-group").html(data);
                        }
                    }
                })
            })

            // 点赞评论
            $(".like_count").click(function(){
                var obj = $(this).find("em");
                var id  = $(this).attr("data-id");
                var num = $(this).find("em").text();

                $.ajax({
                    url:'/index/news/like_count',
                    data:{"id":id},
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        if (data == 1) {
                            obj.text(parseInt(num)+1);
                        }else{
                            return;
                        }
                    }
                })
            })

            // 点赞回复
            $(".item").on("click", ".reply-group .like_count",function(){
                var obj = $(this).find("em");
                var id  = $(this).attr("data-id");
                var num = $(this).find("em").text();

                $.ajax({
                    url:'/index/news/like_reply',
                    data:{"id":id},
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        if (data == 1) {
                            obj.text(parseInt(num)+1);
                        }else{
                            return;
                        }
                    }
                })
            })
        })
    </script>    
</body>
</html>